<!--
 * @Description: table二次封装
 * @Author: zyj
 * @Date: 2022-05-23 17:25:49
 * @LastEditors: zyj
 * @LastEditTime: 2022-06-13 10:39:53
-->
<template>
  <div class="table-wrap">
    <!-- 筛选项 -->
    <div class="filters flex f-x-s f-y-s">
      <slot name="filters"></slot>
    </div>
    <!-- 表 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-key="options.rowKey"
      :tree-props="options.treeProps"
      @row-dblclick="rowDblclick"
    >
      <el-table-column v-if="showExpand" type="expand">
        <template slot-scope="scope">
          <slot name="expand" :rowData="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column v-if="showIndex" type="index" width="80" label="No"></el-table-column>
      <el-table-column
        class="flex f-x-s f-y-c"
        v-for="(th, index) in tableHeader"
        :key="index"
        :prop="th.prop"
        :label="th.label"
        :width="th.width"
        :min-width="th.minWidth"
        :fixed="th.fixed"
      >
        <template slot-scope="scope">
          <div v-if="th.type == cellTypes.BUTTON">
            <el-button
              type="text"
              :style="{
                color: buttonColor[ele.btnColor] || buttonColor['primary']
              }"
              v-for="ele in th.buttons"
              :key="`${th.id}${ele.action}`"
              @click="handleClick(ele.action, scope.$index, scope.row)"
              >{{ ele.label }}</el-button
            >
          </div>
          <template v-else-if="th.type == cellTypes.SLOT">
            <slot :name="th.prop" :rowData="scope.row"></slot>
          </template>
          <template v-else>{{ scope.row | formatter(th.prop, th.defaultVal, th.formatter) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-if="options.pageNum"
      :pageNum="options.pageNum"
      :pageSize="options.pageSize"
      :total="options.total"
      @goSpecifiedPage="goSpecifiedPage"
    />
  </div>
</template>

<script>
/* 
tableHeader格式：
[{
  minWidth: 140,  //单元格宽度
  prop:"code",  //单元格取值字段，如果配置了type，则不需要配此项
  label: '商品编码',  //表头展示
  type: 'BUTTON',  //取值范围为BUTTON、SLOT，如果展示一般的字段值，则不需要配此项
  defaultVal: '-',  //单元格值为空时的默认展示
  formatter:(row) => {
      //自定义处理单元格的文案展示，如果想要在单元格里展示自定义的html元素，请使用type:'SLOT'实现
      return row.sex == 1 ? '男':'女';
  },
  buttons: [   //操作栏需配置此项，需要配置type: 'BUTTON'才生效，其中power为权限，btnColor按钮颜色
    { action: 'add', label: '新增', power: 'goodsBrandAdd' },
    { action: 'delete', label: '删除', power: 'goodsBrandDelete', btnColor: 'danger'}
  ]
},
...
] */
export default {
  name: 'Table',
  props: {
    showIndex: {
      //是否展示索引
      type: Boolean,
      default: false
    },
    showExpand: {
      //是否有折叠
      type: Boolean,
      default: false
    },
    options: {
      tyepe: Object,
      default: () => ({
        rowKey: '',
        treeProps: {}
      })
    },
    tableHeader: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      cellTypes: {
        // 单元格类型，除了一般字段展示，还可配置按钮、插槽
        BUTTON: 'BUTTON',
        SLOT: 'SLOT'
      },
      buttonColor: {
        // 按钮颜色
        primary: '#3371FF',
        danger: '#F53F3F'
      }
    }
  },
  methods: {
    // 翻页、切换分页大小
    goSpecifiedPage(value, type) {
      this.$emit('pageChange', { key: type, [type]: value })
    },
    // 操作栏按钮点击
    handleClick(action, index, row) {
      this.$emit('action', { action, index, row })
    },
    // 双击
    rowDblclick(row, column, cell, event) {
      this.$emit('dbClick', { row, column, cell, event })
    }
  },
  filters: {
    /**
     * @description: 表格单元格内容过滤器
     * @param {*} data  单条数据
     * @param {*} key  单元格prop
     * @param {*} defaultVal  单元格值为空时的默认展示
     * @param {*} fn  单元格自定义format
     * @return {*}
     * @author: zyj
     */
    formatter(data, key, defaultVal = '', fn) {
      return fn ? fn(data) : data[key] ? data[key] : defaultVal
    }
  }
}
</script>

<style lang="scss" scoped>
</style>